<template>
<div id="pDiv">
  <div id="inputDiv">
    <div id="iconDiv">
      <i class="el-icon-switch-button"></i>
    </div>
    <div class="rowDiv">
      <el-label class="label">用户名：</el-label>
      <el-input class="input" placeholder="请输入用户名" v-model="username"></el-input>
    </div>
    <div class="rowDiv">
      <el-label class="label">密码：</el-label>
      <el-input class="input" placeholder="请输入密码" v-model="password"></el-input>
    </div>
    <div class="buttonDiv">
      <el-button class="button" @click="login">登录</el-button>
    </div>
  </div>
</div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "LoginPage",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      request({
        url: '/security/oauth/token',
        method: 'post',
        params: {
          username: this.username,
          password: this.password,
          grant_type: 'password',
          client_id: 'client-app',
          client_secret: '123456'
        }
      }).then(response => {
        if (response && response.data) {
          this.$message.success('登录成功');
          localStorage.setItem('token', response.data.token);
           this.$router.push({ path: '/' });
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('保存失败')
      })
    },
  },
  mounted() {
  }
}
</script>

<style scoped>
#pDiv{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9BC1FD;
  min-height: 100vh
}
#inputDiv{
  background-color: #FFFFFF;
  width: 600px;
  height: 400px;
  border-radius: 10px;
}
#iconDiv{
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#iconDiv i{
  font-size: 80px;
  background-color: #778AFC;
  color: #FFFFFF;
  border-radius: 50%;
}
.rowDiv{
  height: 60px;
}
.label {
  margin-left: 150px;
  display: inline-block;
  width: 100px;
}
.input {
  width: 200px;
  display: inline-block;
}
.buttonDiv{
  height: 100px;
  /*border: solid 1px;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.button{
  width: 300px;
  border-radius: 20px;
  background-color: #6986FC;
  color: #FFFFFF;
}
</style>